<template>
	<view class="login">
		<u-toast ref="uToast"></u-toast>
		<view class="">
			<u-navbar :autoBack="true" bgColor="rgba(255, 255, 255, 0.39)"></u-navbar>
		</view>
		<view class="login-main">
			<view class="login-img">
				<image src="../../static/logo.png" mode=""></image>
				<text>手机号登录</text>
			</view>
			<view class="login-text">
				首次登录手机号将在验证后生成新账号
			</view>
			<view v-if="isCheck">
				<view class="login-phone">
					<input type="tel" placeholder="请输入手机号" v-model="phone" />
				</view>
				<view class="login-code">
					<button 
					@click="code" 
					:disabled="isBtn"
					:class="isBtn?'active':''"
					 >发送短信验证码</button>
				</view>
			</view>
			<view v-else>
				<view class="login-user">
					<input type="text" placeholder="用户名" v-model="user.name" />
				</view>
				<view class="login-user">
					<input type="password" placeholder="密码" v-model="user.pwd" />
				</view>
				<view class="login-code">
					<button @click="login">登录</button>
				</view>
			</view>
			<view class="login-pwd" @click="loginUser">
				{{isCheck?"用户名和密码登录":"短手机号登录"}}
			</view>
			<view class="login-msg">
				<u-checkbox-group @change="checkBtn"  >
					<u-checkbox shape="circle"></u-checkbox>
					<view class="msg-text">
						我已阅读并同意<text>服务条款</text>和<text>隐私政策</text>
					</view>
				</u-checkbox-group>
			</view>
		</view>
	</view>
</template>

<script>
	import {loginByJson} from '@/api/login.js'
	import {Encrypt} from '../../utils/ase.js'
	import {mapMutations} from 'vuex'
	export default {
		data() {
			return {
				phone:'',
				isBtn: true,
				check: 0,
				isCheck: false,
				user:{
					name:'',
					pwd: ''
				}
			}
		},
		methods: {
			...mapMutations(['setToken']),
			code() {
				if(this.check){
					uni.navigateTo({
						url: `/pages/login/code?tel=${this.phone}`
					})
				} else{
					uni.showToast({
						title:'请查看服务条款和隐私协议',
						icon:'error'
					})
				}
				
			},
			checkBtn(e){
				this.check = e.length
			},
			loginUser(){
				this.isCheck = !this.isCheck
			},
			login(){
				if(this.check){
					this.$refs.uToast.show({
						message:'登录中',
						type:'loading',
						duration: 25000	
					})
					
					loginByJson({
						username: this.user.name,
						password: this.user.pwd
					}).then(res=>{
						//设置token
						this.setToken(res.accessToken)

						//返回 我的 页面
						uni.switchTab({
							url:'/pages/tabs/me'
						})
					})
				}else{
					uni.showToast({
						title:'请查看服务条款和隐私协议',
						icon:'error'
					})
				}
			}
		},
		watch:{
			phone(newVal, oldVal){
				let reg = /^1[23456789]\d{9}$/
				this.isBtn = !reg.test(newVal)
			}
		}
	}
</script>

<style>
	.login {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100vw;
		height: 100vh;
		background: rgba(255, 255, 255, 0.39);
	}

	.login-main {
		/* 		display: flex;
		flex-direction: column; */
		flex: 1;
		margin: 0 58rpx;
	}

	.login-img {
		display: flex;
		align-items: center;
	}

	.login-img image {
		width: 83rpx;
		height: 83rpx;
	}

	.login-img text {
		padding-left: 22rpx;
		font-size: 56rpx;
		font-weight: bold;
		color: #343234;
	}

	.login-text {
		padding-top: 45rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #343234;
		letter-spacing: 2rpx;
		opacity: 0.53;
	}

	.login-phone {
		padding-top: 121rpx;
		padding-bottom: 31rpx;
		border-bottom: 2rpx solid #707070;
	}
	
	.login-user{
		padding: 24rpx 0;
		border-bottom: 2rpx solid #707070;
	}

	.login-code {
		padding-top: 88rpx;
	}

	.login-code button {
		width: 100%;
		height: 100rpx;
		font-size: 33rpx;
		font-weight: bold;
		color: #FFFFFF;
		letter-spacing: 8rpx;
		opacity: 1;
		background-color: #337AFF;
	}
	.login-pwd{
		display: flex;
		justify-content: flex-end;
		padding-top: 18rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #343234;
		letter-spacing: 2rpx;
	}

	.login-msg {
		padding-top: 38rpx;
	}

	/deep/ .u-checkbox-group {
		justify-content: center;
		align-items: center;
	}

	.msg-text {
		font-size: 24rpx;
		font-weight: 400;
		color: #343234;
		letter-spacing: 2rpx;
	}

	.msg-text text {
		color: #0077FF;
	}
	.login button.active{
		background-color: #ccc;
	}

</style>